<template>
  <div>
    <el-form-item :label="title + '：'">
      <div class="keywords-select">
        <el-input
          :placeholder="'请输入' + title"
          v-model="key1"
          class="input-with-select"
          size="mini"
        >
          <el-select
            filterable
            v-model="select1"
            slot="prepend"
            placeholder="请选择"
            class="oneselect"
            style="width:150px"
            size="mini"
          >
            <el-option
              v-for="item in selectData"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-input>
      </div>
      <div class="keywords-input">
        <el-button
          :type="btnType1"
          :plain="plainFlag1"
          class="simplified"
          @click="switchfont(1)"
          >简
        </el-button>
        <el-button
          :type="btnType2"
          style="margin-left:-6px"
          :plain="plainFlag2"
          class="complex"
          @click="switchfont(2)"
        >
          繁
        </el-button>
        <el-button type="primary" @click="addkeyword()">增加关键词</el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'keywords',
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: '关键词'
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 简繁按钮type
      btnType1: 'success',
      btnType2: 'info',
      // 简繁按钮plain
      plainFlag1: false,
      plainFlag2: true,
      key1: '',
      select1: '3',
      keywords1: '',
      selectKeyword: {}, // 当前选中的关键词类型
      keywords: [],
      typeface: 0,
      selectData: [
        {
          id: '3',
          label: '标题或正文',
          value: '3'
        },
        {
          id: '-3',
          label: '标题与正文',
          value: '-3'
        },
        {
          id: '1',
          label: '标题',
          value: '1'
        },
        {
          id: '2',
          label: '正文',
          value: '2'
        },
        {
          id: '4',
          label: '仅记录ID',
          value: '4'
        },
        {
          id: '-4',
          label: '记录ID组合',
          value: '-4'
        },
        {
          id: '6',
          label: '版权来源',
          value: '6'
        },
        {
          id: '7',
          label: '仅指纹_3个月',
          value: '7'
        },
        {
          id: '-7',
          label: '语义指纹组合',
          value: '-7'
        },
        {
          id: '8',
          label: '仅URL',
          value: '8'
        },
        {
          id: '9',
          label: '发布来源',
          value: '9'
        },
        {
          id: '5',
          label: '作者',
          value: '5'
        },
        {
          id: '10',
          label: '版权',
          value: '10'
        },
        {
          id: '-99',
          label: '规则',
          value: '-99'
        }
      ]
    }
  },
  methods: {
    // 点击切换 简繁体
    switchfont(type) {
      if (type === 1) {
        this.typeface = '0'
        this.btnType1 = 'success'
        this.btnType2 = 'info'
        this.plainFlag1 = false
        this.plainFlag2 = true
      } else {
        this.typeface = '1'
        this.btnType2 = 'success'
        this.btnType1 = 'info'
        this.plainFlag2 = false
        this.plainFlag1 = true
      }
      let params = { fontType: this.typeface }
      this.setNewFormData(params)
    },
    // 点击增加关键词
    addkeyword() {
      this.keywords = this.formData.keywords
      this.typeface = this.formData.fontType
      if (!(this.key1 === '')) {
        this.keywords.push(
          this.select1 + ':' + this.selectKeyword.label + ':' + this.key1
        )
        let params = { keywords: this.keywords }
        this.setNewFormData(params)
        this.key1 = ''
      } else {
        this.$confirm('提示', {
          title: '提示',
          message: '请输入关键词',
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
          .then(() => {})
          .catch(() => {})
      }
    },
    setKeyword() {
      this.keywords1 =
        this.key1 !== ''
          ? this.select1 + ':' + this.selectKeyword.label + ':' + this.key1
          : ''
      let params = { keywords1: this.keywords1 }
      this.setNewFormData(params)
    },
    init() {
      let item = this.chartsCondition.keywords1.split(':')
      this.select1 = item[0] ? item[0] : '3'
      this.key1 = item[2] ? item[2] : ''
    },
    ...mapMutations('charts', ['setNewFormData'])
  },
  computed: {
    // look up in `some/nested/module`
    ...mapState('charts', ['formData', 'chartsCondition', 'resetFormData'])
  },
  mounted() {
    // 3-标题或正文-123
    let _this = this
    this.selectKeyword = this.selectData.find(
      item => item.value === _this.select1
    )
    this.init()
    this.typeface = this.chartsCondition.fontType
  },
  watch: {
    key1(val) {
      this.setKeyword()
    },
    select1(val) {
      this.selectKeyword = this.selectData.find(
        item => item.value === this.select1
      )
      this.setKeyword()
    },
    show(val) {
      this.key1 = this.chartsCondition.keywords1
        ? this.chartsCondition.keywords1.split(':')[2]
        : ''
      this.select1 = this.chartsCondition.keywords1
        ? this.chartsCondition.keywords1.split(':')[0]
        : '3'
    },
    resetFormData() {
      this.key1 = ''
      this.select1 = '3'
      this.keywords1 = ''
      this.selectKeyword = {}
      this.keywords = []
      this.switchfont(1)
    }
  }
}
</script>

<style scoped>
a {
  color: #0559b1;
}
.keywords-select {
  float: left;
}
.keywords-input {
  float: left;
  margin-left: 20px;
}
</style>
